<template>
  <div class="all">
    <!-- 第一个盒子的布局 -->
    <el-card>
      <div class="dashboard-box1">
        <div class="dashboard_etui">
          <div class="el-icon-user-solid wyIcon" />

          <div class="box">
            <span>
              用户数量<br>
              {{ data.roles }}
            </span>
            <!-- <span>81,212</span> -->
          </div>
        </div>
        <div class="dashboard_etui">
          <div class="el-icon-s-grid wyIcon" />
          <div class="box">
            <span>
              房产数量<br>
              {{ data.properties }}
            </span>
          </div>
        </div>
        <div class="dashboard_etui">
          <div class="el-icon-s-home wyIcon" />
          <div class="box">
            <span>
              房产类别<br>
              {{ data.category }}
            </span>
          </div>
        </div>
        <div class="dashboard_etui">
          <div class="el-icon-s-custom wyIcon" />
          <div class="box">
            <span>
              房产中介<br>
              {{ data.roles }}
            </span>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 第二个盒子的布局 -->
    <el-card class="dashboard_card1">
      <div ref="dashboardBox2" style="height:500px" />
    </el-card>
    <!-- 第三个盒子的布局 -->
    <el-card class="dashboard_card2">
      <el-card class="dashboard_left">
        <div>
          <template>
            <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
              <el-tab-pane class="message" label="最新消息" name="first">
                <h1>峥嵘二十载 向未来——海豚房产20周年庆典</h1>
                <h5>
                  二十载励精图治，为海豚房产打下坚实基础；一朝战略合作，给了我们再度腾飞的实力!海豚房产·广州城市总经理邓双喜讲述了入司18年和Q房网合作1周年以来的历程，满满的感谢！感谢创始团队和辉达的关心和培养！感恩每一位辉达人的携手并进、努力付出，一起走过的风风雨雨......
                </h5>
                <h5>
                  一路相伴的同行之人给企业注入了永葆青春的活力，也给了企业不断发展的动力。《穿越2003》——一个视频让大家了解了辉达一路走来的历史，重现了辉达发展史上无数励志与感人的瞬间，让经历过这一切的老员工们热泪盈眶。
                </h5>
                <h6>来源: 经济日报2022年3月7日-11.15.40</h6>
              </el-tab-pane>
              <el-tab-pane label="最新新闻" name="second">
                <template>
                  <div class="news">
                    <el-divider content-position="right">羊城晚报-2022年3月6日</el-divider>
                    <span>最新动态：乌谈判代表说第三轮谈判7日举行
                    </span>
                    <el-divider content-position="right">羊城晚报-2022年3月5日</el-divider>
                    <span>政协首场新闻发布会</span>
                    <el-divider content-position="right">羊城晚报-2022年3月2日</el-divider>
                    <span>代表建议通过税收手段鼓励生育</span>
                    <el-divider content-position="right">羊城晚报-2022年3月3日</el-divider>
                    <span>冬残奥会比赛项目科普</span>
                    <el-divider content-position="right">羊城晚报-2022年3月1日</el-divider>
                    <span>外媒称泽连斯基在基辅掩体东躲西藏</span>

                  </div>
                </template>
              </el-tab-pane>
              <el-tab-pane class="buy" label="购买信息" name="third">
                <div>🐎先生  购买独栋别墅一栋  联系方式:1801****4823</div>
                <div>艵女士  购买独栋别墅一栋  联系方式:1802****4443</div>
                <div>每女士  购买独栋别墅一栋  联系方式:1803****4463</div>
                <div>张先生  购买独栋别墅一栋  联系方式:1804****4423</div>
                <div>清先生  购买独栋别墅一栋  联系方式:1805****4493</div>
                <div>🐂先生  购买独栋别墅一栋  联系方式:1801****4823</div>
                <div>艵女士  购买独栋别墅一栋  联系方式:1802****4443</div>
                <div>每女士  购买独栋别墅一栋  联系方式:1803****4463</div>
                <div>张先生  购买独栋别墅一栋  联系方式:1804****4423</div>
                <div>清先生  购买独栋别墅一栋  联系方式:1805****4493</div>
                <div>🐕先生  购买独栋别墅一栋  联系方式:1801****4823</div>
                <div>艵女士  购买独栋别墅一栋  联系方式:1802****4443</div>
                <div>每女士  购买独栋别墅一栋  联系方式:1803****4463</div>
                <div>张先生  购买独栋别墅一栋  联系方式:1804****4423</div>
                <div>清先生  购买独栋别墅一栋  联系方式:1805****4493</div>
              </el-tab-pane>
              <el-tab-pane label="帮助进度" name="fourth">
                <el-steps :active="active" finish-status="success">
                  <el-step title="提交申请" />
                  <el-step title="核查验证" />
                  <el-step title="给予反馈" />
                </el-steps>

              </el-tab-pane>
              <el-tab-pane label="打赏" name="fifth" class="myImage">
                <img src="" alt="">
              </el-tab-pane>
            </el-tabs>
          </template>
        </div>
      </el-card>
      <el-card>
        <div ref="dashboard_right" class="dashboard_right" />
      </el-card>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapGetters } from 'vuex'
import { getClientsList } from '@/api/clients'
import { getPropertiesCount } from '@/api/property'
import { searchCategory } from '@/api/category'
import { getRoleTotal } from '@/api/setting'
export default {
  name: 'Dashboard',
  // Element组件用法
  data() {
    return {
      active: 0,
      activeName: 'second',
      data: {}
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  // async created() {
  //   const clients = await getClientsList()
  //   const properties = await getPropertiesCount()
  //   const category = await searchCategory()
  //   const roles = await getRoleTotal()
  //   console.log(clients.length, properties, category, roles)

  //   this.data = { clients: clients.length, properties, category, roles }
  // },
  // 可视化
  async mounted() {
    const clients = await getClientsList()
    const properties = await getPropertiesCount()
    const category = await searchCategory()
    const roles = await getRoleTotal()
    console.log(clients.length, properties, category, roles)

    this.data = { clients: clients.length, properties, category, roles }
    // 折线
    this.getLineEchart()
    // 圆饼
    this.getPieEchart()
  },
  methods: {
    next() {
      if (this.active++ > 2) this.active = 0
    },
    // Element组件用法
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    // 折线图
    getLineEchart() {
      // 基于准备好的dom，初始化echarts实例
      // console.log(this.$refs.dashboardBox2)
      var myChart = echarts.init(this.$refs.dashboardBox2)
      // 绘制图表
      myChart.setOption({
        title: {
          text: '每周访问量'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['房产', '经纪人', '客户', '二手房', '其他']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '房产',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '经纪人',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '客户',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '二手房',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '其他',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      })
    },
    // 圆饼图
    getPieEchart() {
      // console.log(143, this.$refs.dashboard_right)
      var myChart1 = echarts.init(this.$refs.dashboard_right)
      var option = {
        legend: {
          orient: 'vertical',
          right: 5,
          top: 60
          // bottom: 20,
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [20, 120],
            center: ['40%', '48%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            data: [
              { value: 25, name: '青铜' },
              { value: 28, name: '白银' },
              { value: 30, name: '黄金' },
              { value: 35, name: '钻石' },
              { value: 30, name: '星耀' },
              { value: 20, name: '王者' },
              { value: 15, name: '荣耀王者' }
            ]
          }
        ]
      }
      myChart1.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.all{
margin: 20px;
}

.dashboard-box1 {
  display: flex;
  justify-content: space-between;
  font-size: 30px;
  line-height: 46px;
  // width: 1200px;
  // background-color: rgb(221, 217, 217);
  .wyIcon{
    margin: auto;
    font-size: 50px;
  }
}
.message{
  height: 150px;
  overflow: auto;
}
.news{
  overflow: auto;
  height: 150px;
}
.dashboard_etui span{
  text-align: center;
}
.dashboard_etui {
  display: flex;
  background-color: #fff;
  width: 23%;
  height: 100px;
  border: 1px solid #40a0ff5e;
   .wyIcon{
     color: #40a0ffc4;
   }
  span {
    margin-right: 10px;
    font-size: 15px;
    color: #409eff;
  }
  img {
    margin: auto;
    width: 50px;
    height: 50px;
  }
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-left: 120px;
}
.dashboard_card1 {
  margin-top: 10px;
}
 .dashboard_card2{
  margin-top: 10px;

  .dashboard_left{
    width: 48%;
     height: 321px;
    // background-color: #999;
    float: left;
    margin-right: 10px;
    .myImage{
      text-align: center;
      img{
      width: 160px;
      height: 170px;
      }
    }
     div{
      margin-top: 25px;
    }
    span{
      font-size: 12px;
      font-weight: 700;
    }
    h1{
      font-size: 18px;
    }
    h3{
      color: #999;
    }
    .text {
    font-size: 14px;
  }
  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }
  }
  .dashboard_right{
    width: 100%;
    height: 300px;
    // background-color: #0a0;
    float: right;
  }
  .buy{
    height: 150px;
    overflow: auto;
  }
}
</style>
